<!--
    图表展示
-->
<template>
    <view>
        <view class="chart-wrap card-show">
            <view
                class="chart-header flex space-between align-center bottom1px">
                <view class="chart-header-item">
                    <view class="icon iconfont icon-data-view"></view>
                    <text>趋势图</text>
                </view>
                <view class="chart-header-item">
                    <view class="icon iconfont icon-date"></view>
                    <text>选择时间过滤数据</text>
                </view>
            </view>
            <view chart-content>
                <canvas
                    canvas-id="chartA"
                    id="chartA"
                    class="charts"
                    @touchstart="touchLineA"></canvas>
            </view>
        </view>
        <!-- 图表数据说明 -->
        <view class="chart-explain">
            <view v-for="(item, key) in summarizeData" :key="key" class="chart-explain-item">
                <text class="chart-explain-key">
                    {{ $t('chart.data.summarize')[key] || '默认'}}
                </text>
                <text>{{ item }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js'
import { mapGetters } from 'vuex'
let chartCanvas = null
export default {
    data() {
        return {
            cWidth: '',
            cHeight: '',
            pixelRatio: 1
        }
    },
    computed: {
        ...mapGetters('details', {
            lineChartData: 'lineChartData', // （折线/曲线）图数据
            summarizeData: 'summarizeData' // 概览数据
        })
    },
    methods: {
        // 初始化图表
        chartInit(data) {
            const result = {
                LineA: {
                    categories: data.time,
                    series: [{
                        name: '',
                        data: data.value,
                        type: 'line',
                        style: 'curve',
                        color: '#1890ff'
                    }]
                }
            }
            this.setChart('chartA', result)
        },
        // 设置图表
        setChart(id, data) {
            let chartData = {
                categories: data.LineA.categories,
                series: data.LineA.series
            }
            let _self = this
            chartCanvas = new uCharts({
                $this: _self,
                canvasId: id, // ID
                type: 'line', // 类型
                fontSize: 11, // 文字大小
                // 图例
                legend: {
                    show: false
                },
                dataLabel: false, // 是否显示数据值
                dataPointShape: false, // 是否显示数据点
                pixelRatio: _self.pixelRatio,
                categories: chartData.categories,
                series: chartData.series,
                xAxis: {
                    disabled: true, // 隐藏X轴
                    disableGrid: true, // x轴刻度
                    gridType: 'solid',
                    gridColor: '#ebeef5',
                    dashLength: 8,
                    labelCount: 2
                },
                yAxis: {
                    gridType: 'solid',
                    gridColor: '#ebeef5',
                    dashLength: 8,
                    splitNumber: 5, // 显示列的数量
                    min: 2, // 最小值
                    max: 40 // 最大值
                },
                width: _self.cWidth * _self.pixelRatio,
                height: _self.cHeight * _self.pixelRatio,
                extra: {
                    lineStyle: 'straight'
                }
            })
        },
        // 触摸显示提示的内容
        touchLineA(e) {
            chartCanvas.showToolTip(e, {
                format: function(item, category) {
                    return category + ' ' + item.name + ':' + item.data
                }
            })
        }
    },
    created() {
        this.cWidth = uni.upx2px(750)
        this.cHeight = uni.upx2px(400)
    },
    watch: {
        // 监听图表数据并初始化
        'lineChartData': {
            handler: function(val) {
                this.chartInit(val)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.chart-wrap {
    background-color: #fff;
    .chart-header {
        padding: 20rpx;
        .chart-header-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon {
                font-size: 26rpx;
                color: #027afe;
                margin-right: 10rpx;
            }
        }
    }
}

.charts {
    width: 100%;
    height: 400rpx;
}

.chart-explain {
    margin-top: 30rpx;
    padding: 20rpx;
    background-color: #fff;
    .chart-explain-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px;
        &:first-child {
            padding-top: 0;
        }
        .chart-explain-key {
            color: #888;
            margin-right: 10px;
        }
    }
}
</style>